<template>
  <div class="index-page">
    <!-- search input -->
    <a-input-search
      v-model:value="searchParams.searchText"
      placeholder="请输入内容"
      enter-button="Search"
      size="large"
      @search="getAllData"
    />

    <MyDivider />

    <!-- tabs -->
    <a-tabs v-model:activeKey="searchParams.type" @change="getAllData">
      <a-tab-pane key="post" tab="文章"
        ><PostList :post-list="postList"
      /></a-tab-pane>
      <a-tab-pane key="picture" tab="图片" force-render
        ><PictureList :picture-list="pictureList"
      /></a-tab-pane>
      <a-tab-pane key="user" tab="用户">
        <UserList :user-list="userList" />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script setup lang="ts">
import PostList from "../components/PostList.vue";
import UserList from "../components/UserList.vue";
import PictureList from "../components/PictureList.vue";
import MyDivider from "../components/MyDivider.vue";
import { ref, watchEffect } from "vue";
import { useRoute, useRouter } from "vue-router";
import myAxios from "@/plugins/myAxios";

const postList = ref([]); // 文章数据列表
const pictureList = ref([]); // 图片数据列表
const userList = ref([]); // 用户数据列表

// 请求参数
const searchParams = ref({
  searchText: "", // 输入框内容
  pageSize: 10,
  pageNum: 1,
  type: "post",
});

// 请求数据
const getAllData = () => {
  const { type } = searchParams.value;

  myAxios.post("search/all", searchParams.value).then((res: any) => {
    if (type === "post") {
      postList.value = res.dataList;
    } else if (type === "picture") {
      pictureList.value = res.dataList;
    } else if (type === "user") {
      userList.value = res.dataList;
    }
  });
};

// 初始化首页数据
getAllData();
</script>
